<!-- subpkg_consult/department/index.vue -->
<script setup lang="ts">
import { departmentListApi } from "@/apis/consult"
import type { DepartData } from "@/type/consult"
import { ref } from "vue"

// 1. 科室列表
const departmentList = ref<DepartData[]>([])
// 科室列表
async function getDepartmentList() {
  // 科室列表接口
  const data = await departmentListApi()
  console.log("科室：", data)
  // 渲染列表数据
  departmentList.value = data
}

// 获取科室列表
getDepartmentList()

const currentIndex = ref(0)
</script>

<template>
  <view class="department-page">
    <scroll-view scroll-y class="department-primary">
      <view
        v-for="(department, index) in departmentList"
        :key="department.id"
        class="department-item"
        :class="{ active: currentIndex === index }"
        @click="currentIndex = index"
        >{{ department.name }}</view
      >
    </scroll-view>
    <scroll-view class="department-secondary">
      <navigator
        v-for="(sub, subIndex) in departmentList[currentIndex]?.child"
        :key="sub.id"
        hover-class="none"
        url="/subpkg_consult/description/index"
        class="department-item"
      >
        {{ sub.name }}
      </navigator>
    </scroll-view>
  </view>
</template>

<style lang="scss">
@import "./index.scss";
</style>
